<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>回答审核</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/element.css"/>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/requestjs.js"></script>

    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>

</head>
<body>
<div id="app">

    <!--查看文章详情-->
    <el-dialog title="文章详情" :visible.sync="dialogFormVisible" width="50%">
        <el-form label-width="80px" :model="details">
            <el-form-item label="作者">
                <el-input v-model="details.aUserId"></el-input>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-input v-model="details.aCreateDate"></el-input>
            </el-form-item>
            <el-form-item label="内容">
                <el-input type="textarea" :rows="5" v-model="details.aContent"/>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)"> pass </el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)">no pass </el-button>
      <el-button v-else type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
    </el-dialog>


    <!--审核操作-->
    <el-dialog title="审核文章" :visible.sync="check" width="30%">
        <el-form>
            <el-form-item label="审核描述">
                <el-input v-model="checkDetail"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="check = false,checkDetail = '' ">取 消</el-button>
        <el-button type="success" @click="checkCommit(1)">pass</el-button>
        <el-button type="danger" @click="checkCommit(-2)">no pass</el-button>
      </span>
    </el-dialog>

    <el-dialog title="下架文章" :visible.sync="delMark" width="30%">
        <span>您确定下架此篇文章?</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="delMark = false">取 消</el-button>
        <el-button type="primary" @click="delzx()">确 定</el-button>
      </span>
    </el-dialog>


    <table class="layui-hide" id="demo" lay-filter="test"></table>

</div>

<div id="openProductBox" style="display: none; padding: 10px;">

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    {{#  if(d.aState == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } else if(d.aState == 1){ }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</button>
    {{#  } }}
</script>

<script type="text/html" id="buttonTpl">
    {{#  if(d.aState == 1){ }}
    <button class="layui-btn layui-btn-xs">已审核</button>
    {{#  }else if(d.aState == -1){ }}
    <button class="layui-btn-warm layui-btn-xs">已下架</button>
    {{#  }else if(d.aState == -2){ }}
    <button class="layui-btn-danger layui-btn-xs">未通过</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
    {{#  } }}
</script>

<blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>

<script src="../lib/layui/layui.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            check: false,
            delMark: false,
            checkDetail: '',
            details: {}
        },
        methods: {
            openDetail(data) {
                this.dialogFormVisible = true;
                this.details = data;
            },
            checkFunc(data) {
                this.details = data;
                this.check = true;
            },
            checkCommit(state) {
                this.details.aCheakDescribe = this.checkDetail;
                this.details.aState = state;
                var checkTime = '';
                var myDate = new Date();
                checkTime = myDate.getFullYear() + '-' + (((myDate.getMonth() + 1) <= 9) ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)) + '' +
                    '-' + (myDate.getDate() <= 9 ? '0' + (myDate.getDate() + 1) : (myDate.getDate() + 1)) + ' '
                    + (myDate.getHours() <= 9 ? '0' + myDate.getHours() : myDate.getHours())
                    + ':' + (myDate.getMinutes() <= 9 ? '0' + myDate.getMinutes() : myDate.getMinutes())
                    + ':' + (myDate.getSeconds() <= 9 ? '0' + myDate.getSeconds() : myDate.getSeconds()) + '.0';
                this.details.aChechTime = checkTime;

                if (state == 1) {
                    methodaxios.post('http://localhost:9001/zx-app/pass', this.details, res => {
                        this.check = false;
                        this.dialogFormVisible = false;
                        layui.table.reload("demo");
                        this.checkDetail = '';
                        this.details = {}
                    })
                }
            },

            delFunc(data) {
                this.details = data;
                this.delMark = true;
            },
            delzx() {
                console.log(this.details);
                this.details.aState = -1
                methodaxios.post('http://localhost:9001/zx-app/upd', this.details, res => {
                    this.check = false;
                    this.dialogFormVisible = false;
                    this.delMark = false;
                    layui.table.reload("demo");
                })
            }
        }

    })


    layui.config({
        version: '1594038785991' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        //向世界问个好
        //layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: 'http://localhost:9001/zx-app/list' //数据接口
            , title: '回答审核'
            , page: true //开启分页
            //,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left', width: 50}
                , {field: 'id', title: 'ID', width: 60, sort: true, fixed: 'left'}
                , {field: 'aUserId', title: '作者', width: 100}
                , {field: 'aTitle', title: '类型', width: 80}
                , {field: 'aContent', title: '内容', width: 200}
                , {field: 'aCreateDate', title: '创建时间', width: 180}
                , {field: 'achechTime', title: '审核时间', width: 180}
                , {field: 'aState', title: '状态', width: 80, templet: '#buttonTpl', align: 'center'}
                , {field: 'aChechTime', title: '审核描述', width: 200}
                , {fixed: 'right', width: 114, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'detail') {
                console.log("查询详情")
                app.openDetail(data);
            } else if (layEvent == 'check') {
                app.checkFunc(data);
                console.log('审核操作');
            } else if (layEvent == 'del') {
                app.delFunc(data);
                console.log('下架操作');
            }
        });

        //执行一个轮播实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: 200
            , arrow: 'none' //不显示箭头
            , anim: 'fade' //切换动画方式
        });

        //将日期直接嵌套在指定容器中
        var dateIns = laydate.render({
            elem: '#laydateDemo'
            , position: 'static'
            , calendar: true //是否开启公历重要节日
            , mark: { //标记重要日子
                '0-10-14': '生日'
                , '2020-01-18': '小年'
                , '2020-01-24': '除夕'
                , '2020-01-25': '春节'
                , '2020-02-01': '上班'
            }
            , done: function (value, date, endDate) {
                if (date.year == 2017 && date.month == 11 && date.date == 30) {
                    dateIns.hint('一不小心就月底了呢');
                }
            }
            , change: function (value, date, endDate) {
                layer.msg(value)
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        //上传
        upload.render({
            elem: '#uploadDemo'
            , url: 'https://httpbin.org/post' //改成您自己的上传接口
            , done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                console.log(res)
            }
        });

        //滑块
        var sliderInst = slider.render({
            elem: '#sliderDemo'
            , input: true //输入框
        });

        /* //底部信息
        var footerTpl = lay('#footer')[0].innerHTML;
        lay('#footer').html(layui.laytpl(footerTpl).render({}))
        .removeClass('layui-hide'); */
    });
</script>

</body>
</html>        
        